<template>
  <div :class="classes">
    <div :class="barConClasses">
      <i
        :class="`${prefix}-bar`"
        v-once
        v-for="i in 8"
        :key="`trigger-${i}`"
      ></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Trigger',
  props: {
    mode: String
  },
  data() {
    return {
      prefix: 'ivu-split-trigger',
      initOffset: 0
    }
  },
  computed: {
    isVertical() {
      return this.mode === 'vertical'
    },
    classes() {
      return [
        this.prefix,
        this.isVertical
          ? `${this.prefix}-vertical`
          : `${this.prefix}-horizontal`
      ]
    },
    barConClasses() {
      return [
        `${this.prefix}-bar-con`,
        this.isVertical ? 'vertical' : 'horizontal'
      ]
    }
  }
}
</script>

<style lang="less">
@import './index.less';
</style>
